<template>
  <div class="region">
    <el-tabs v-model="activeName" @tab-click="handleChange">
      <el-tab-pane v-for="(title,index) in xingb" :key="index" :name="`${index}`">
        <div slot="label">{{ title.directionName }} <span v-if="colorList[index]&&colorList[index][0]>0" class="labelnum">{{ colorList[index][0] }}</span></div>
        <p v-if="typeList[index]&&typeList[index].length" class="pbottom">
          {{ title.directionName }} 共{{ typeList[index]?typeList[index].length:0 }}根
          <span v-if="colorList[index]">缺陷支柱（<span style="color:red;font-size: 15px;">红色</span>）：{{ colorList[index][0] }}根，在隧道支柱（<span style="color:black;font-size: 15px;">黑色</span>）：{{ colorList[index][1] }}根</span>
        </p>
        <div v-for="(child,key) in typeList[index]" :key="key" class="station">
          <div class="line-h">
            <p class="dot" :class="child.count?'colorRed':(child.tunnelName==='1'?'colorBlack':'')" @mouseover="dothover($event,child)" @click="child.count?getinner(child,title.id):''">
              <el-tooltip v-if="child.isshow" class="item" effect="dark" :content="child.pillarNum" placement="top-start">
                <span>{{ child.pillarNum }}</span>
              </el-tooltip>
              <span v-else>{{ child.pillarNum }}</span></p>
          </div>
        </div>
        <div v-if="!typeList[index]||!typeList[index].length" class="noData">暂无数据</div>
      </el-tab-pane>
    </el-tabs>
    <el-dialog
      width="100%"
      class="innerdialog"
      top="0"
      bottom="0"
      :visible.sync="innerVisible"
      append-to-body>
      <dialog-inner ref="inner" />
    </el-dialog>
  </div>
</template>

<script>
import DialogInner from './dialog-inner'
export default {
  name: 'RegionDialog',
  components: {
    DialogInner
  },
  props: {
    xingb: {
      type: Array,
      default: () => []
    },
    data: {
      type: Array,
      default: () => []
    },
    params: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      innerVisible: false,
      alldata: this.data,
      activeName: '0',
      typeList: [],
      colorList: []
    }
  },
  watch: {
    data(val) {
      this.alldata = val
      this.activeName = '0'
      this.gettype()
    }
  },
  mounted() {
  },
  methods: {
    dothover(el, item) {
      if (el.target.offsetWidth < 90) return
      this.$set(item, 'isshow', true)
    },
    getinner(child, directionId) {
      var obj = Object.assign({
        pillar: child,
        directionId: directionId
      }, this.params)
      this.innerVisible = true
      this.$nextTick(_ => {
        this.$refs.inner.getFromvalue(obj)
      })
    },
    gettype() {
      this.typeList = []
      this.colorList = []
      for (const type of this.xingb) {
        const arr = []
        const color = [0, 0]
        for (const item of this.alldata) {
          if (item.directionName === type.directionName) {
            arr.push(item)
            if (item.count) {
              color[0]++
            }
            if (item.tunnelName === '1') {
              color[1]++
            }
          }
        }
        this.colorList.push(color)
        this.typeList.push(arr)
      }
    },
    handleChange(val) {
      console.log(val)
    }
  }
}
</script>

<style scoped lang="scss">
.region{
  height: 100%;
  padding:0 10px;
  ::v-deep .el-tabs{
    height: 100%;
    overflow: hidden;
    .el-tabs__header{
      background: white;
      margin-bottom: 0;
      .el-tabs__nav-wrap{
        z-index: 100;
        background: white;
        .el-tabs__item{
          height: 44px;
          line-height: 50px;
        }
      }
    }
    .el-tabs__content{
      height: calc(100% - 40px);
      overflow-y: scroll;
    }
    .el-tabs__content::-webkit-scrollbar:hover,
    .el-tabs__content::-webkit-scrollbar {
        width: 6px;
      }
      .el-tabs__content::-webkit-scrollbar-thumb,
      .el-tabs__content::-webkit-scrollbar-thumb:hover,
      .el-tabs__content::-webkit-scrollbar-thumb:active {
        background-color: #aed0ea;
      }
    .labelnum{
      position: absolute;
      display: inline-block;
      font-size: 12px;
      line-height: 16px;
      padding: 1px;
      min-width: 18px;
      text-align: center;
      border-radius: 50%;
      background: red;
      color: white;
      opacity: 0.8;
      margin-top: 2px;
      margin-left: -4px;
    }
  }
  .pbottom{
    position: fixed;
    margin-top: -74px;
    margin-left: 240px;
    color: white;
  }
  .station{
      .line-h{
        float: left;
        width: 100px;
        height: 4px;
        background: #006fc5;
        position: relative;
        text-align: center;
        margin: 22px 0;
        .dot{
          position: inherit;
          top: -12px;
          display: inline-block;
          white-space:nowrap;
          border-radius: 50%;
          max-width: 90px;
          padding: 4px 8px;
          overflow: hidden;
          border: solid 2px #006fc5;
          background: white;
        }
        .colorRed{
          background: red;
          cursor:pointer;
          color: white;
        }
        .colorBlack{
          background: black;
          color: white;
        }
      }
    }
}
.innerdialog{
  ::v-deep .el-dialog{
    height: 100%;
    .el-dialog__header{
      padding: 0 16px;
      height: 0;
      background:#006fc5;
      .el-dialog__title{
        color: white;
        font-size: 16px;
      }
      .el-dialog__headerbtn{
        top: 22px;
        .el-icon-close{
          font-size: 20px;
          color: white;
        }
      }
    }
    .el-dialog__body{
      padding: 10px;
      height: calc(100%);
    }
  }
}
</style>
